<template>
    <div class="item">
        <div class="photo">
            <img :src="product.image" :alt="product.name" :class="{gray: product.inventory <= 0}">
        </div>
        <div class="info">
            <input type="hidden" :value="product.id"/>
            <a href="#" class="" @click.prevent="addToCart(product)">
                <i class="el-icon-check"></i>
            </a>
            <h2 class="">{{product.name}}</h2>
            <p class="">{{product.description}}</p>

            <span class="">库存：{{product.inventory}}</span>
            <span class="">价格{{currency(product.price)}}</span>
        </div>
    </div>
</template>

<script>
    import format from '@cart/js/currency.js'
    import {mapState, mapGetters,mapMutations, mapActions} from 'vuex'
export default {
    data: function () {
        return {
        }
    },
    props: {
        product: {
            required: true,
            type: Object
        }
    },
    methods: {
        currency: format,
        ...mapActions(['addToCart'])
    }
}
</script>

<style>
    .info{
        position: relative;
        padding: 25px 5px 5px 5px;
        text-align: center;
    }
    .info:hover{
        background-color: #fe4578;
    }
    .info .el-icon-check{
        font-size: 21px;
        color: white;
    }
    .info a{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin: -25px auto 0 auto;
        width: 50px;
        height: 50px;
        line-height: 40px;
        border-radius: 50px;
        background-color: #fe4578;
        border: 5px solid white;
    }
    .info a:hover{
        box-shadow: 1px 3px 6px #555;
    }

    .info h2{
        margin: 10px 0 10px 0;
        line-height: 1em;
        height: 2em;
    }
    .info p{
        margin: 15px 0;
    }
    .info span{
        display: block;
        line-height: 2em;

        color: #fe4578;
    }
    .info:hover, .info:hover span{
        color: #fff;
    }
    .item .photo{
        font-size: 0;
    }
    .item .photo img{
        max-width: 100%;
        max-height:100%;
    }
    .gray {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);

        filter: grayscale(100%);

        filter: gray;
    }
</style>
